<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.MainTaskInfo"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.EquipInfo }}</span>
        </el-divider>
        <el-table
          :data="list"
          element-loading-text="Loading"
          fit
          highlight-current-row
        >
          >
          <el-table-column :label="dataList.DeviceNumber">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
            "
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceSpecifications">
            <template slot-scope="scope">
              {{ scope.row.specifications }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceStatus">
            <template slot-scope="scope">
              {{ scope.row.statusName }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en'
                ? dataList.eDeviceStorageAddress
                : dataList.DeviceStorageAddress
            "
          >
            <template slot-scope="scope">
              {{ scope.row.storageAddress }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DevicePersonResponsibleId">
            <template slot-scope="scope">
              {{ scope.row.personResponsibleName }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.MaintenanceTask">
            <template slot-scope="scope">
              {{ scope.row.project }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <br />
      <div>
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item
            :label="dataList.MaintenancePersonnel"
            :label-style="{ width: '25%' }"
            :content-style="{ width: '25%' }"
          >
            {{ formData.maintenanceUser.name }}
          </el-descriptions-item>
          <el-descriptions-item :label="dataList.MainTime">
            {{ formatTime(formData.maintenanceDate) }}
          </el-descriptions-item>
        </el-descriptions>

        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.MainResult }}</span>
        </el-divider>
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item
            :label="dataList.EquipStatusAfterMain"
            :label-style="{ width: '25%' }"
            :content-style="{ width: '25%' }"
          >
            {{ formData.maintenanceStatusName }}
          </el-descriptions-item>
          <el-descriptions-item :label="dataList.NextMainTime2">
            {{ formatTime(formData.nextMaintenanceDate) }}
          </el-descriptions-item>
          <el-descriptions-item :label="dataList.Deviceremark">
            {{ formData.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "../../../api/DeviceMaintenanceTask";
import { formatTime } from "../../../utils/time";
export default {
  name: "DeviceMaintenanceTaskDisposeViewDialog",
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
      formLabelWidth: "120",
      loading: false,
      innerDialogFormVisible: false,
      formData: {
        maintenancePersonName: "",
        maintenanceDate: "",
        remark: "",
        nextMaintenanceDate: null,
        maintenanceStatus: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.initData();
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  methods: {
    formatTime,
    initData() {
      getList({ id: this.id, pageIndex: 1, pageSize: 1 })
        .then((res) => {
          var data = res.data.dataList[0];
          this.formData = data;
          this.formData.maintenanceStatus = this.normal;
          data.device.project = data.project;
          this.list.push(data.device);
        })
        .catch((res) => {});
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
  },
};
</script>
